搜索条件通用组件
 <template> 
    <div class="sw-quote">
        <div class="searchform_wrapper">
            <Row>
                <Col :span="contentSpan" class="searchfrom_content">
                     <form-create v-model="apiForm" :option="option" :rule="itemRules"></form-create>
                </Col>
                <Col 
                    :span="buttonSpan" 
                    class="searchfrom_button"
                    :style="{paddingTop: buttonsPaddingTop + 'px'}"    
                >
                <Button v-if="resetButton" @click.prevent="resetClick" style="float:right;">重置</Button>
                <Button @click.prevent="searchClick" icon="ios-search" type="primary" style="float: right;" >查询</Button>
                </Col>
            </Row>
        </div>
    </div>
 </template>
 
 <script>
     // eslint-disable-next-line no-unused-vars
     import { Row} from 'iview';   //, Col, Button, Form, FormItem, Input, Select, Option, 
     import * as _ from 'lodash';
     export default {
         name: "SearchFrom",
         props: { 
            items:{
                type: Array,
            },
            initData:{
                type: Object,
            },
            colCount: {
                type: Number,
                default: 2,
            },
            buttonSpan:{
                type: Number,
                default: 2,
            },
            buttonsPaddingTop:{
                type: Number,
                default: 0,
            },
            resetButton:{
                type: Boolean,
                default: true,
            },
            labelWidth:{
                type: Number,
                default: 80,
            },
            labelPosition:{
                type: String,
                default: 'right',
            },
         },
         data() {
             return {
                apiForm: {},
                option: {
                    inline: false,
                    labelPosition: this.labelPosition,
                    labelWidth: this.labelWidth,
                    showMessage:false,
                    autocomplete: 'off',
                },
             };
         },
         mounted() {
            if(this.initData){
                this.$nextTick(()=>{
                    this.apiForm = this.initData;
                });
            }
         },
         computed:{
            contentSpan(){
                return 24 - this.buttonSpan;
            },
            itemRules(){
                const colSpan = 24/this.colCount;
                const rules = [];
                if(this.items && this.items.length > 0){
                    _.forEach(this.items,(item)=>{
                        if(!_.endWith(item.title,'：')){
                            item.title = item.title + '：';
                        }

                        if(!_.has(item,'col') || item.col === null){
                            item.col = {
                                span: colSpan,
                            }
                        }

                        if(item.type === 'input'){
                            if(!_.has(item,'props') || item.props === null){
                                item.props = {
                                    clearable: true,
                                }
                            } else {
                                if(!_.has(item.props,'clearable')){
                                    item.props.clearable = true;
                                }
                            }
                        }

                        rules.push(item);
                    });
                }
                return rules;
            }
         },
         methods: {
             /**
              * 处理搜索按钮的点击事件
              * 当用户点击搜索按钮时，提交表单并触发 on-search 事件
              */
             searchClick(){
                this.apiForm.submit((formData)=>{   //,$f
                    this.$emit('on-search',formData);
                });
             },
            /**
             * 处理重置按钮的点击事件
             * 当用户点击重置按钮时，重置表单字段
             */
            resetClick(){
                this.apiForm.resetFields();
            },
            /**
             * 设置表单字段的值
             * 如果存在 initData，则遍历 initData 对象的所有键，并将每个键对应的值设置到表单字段中
             */
            setFormItemsValue(){
                if(this.initData){
                    for(const key in this.initData){
                        this.apiForm.setValue(key,this.initData[key]);
                    }
                }
            }
         },
        };
 </script>

 <style lang="less">
    .searchfrom_content{
        .ivu-form-item{
           margin-bottom: 8px;
       }

       .ivu-input-number{
          width: 100% !important;
      }
    }
    /**
     * 搜索表单按钮样式
     * 为搜索表单中的按钮设置样式，包括重置按钮和查询按钮
     */
    .searchfrom_button{
        .ivu-btn{
            &:nth-child(2){
                margin-right: 10px !important;
            }
       }
    }    
 </style>
